@import 'colors';
@import 'values';
@import 'mixins';
@import 'fonts';

@import 'common';
@import 'menu';
@import 'form';

html {
    height:100%;

    body {
        background:white;
        height:100%;
        font:16px 'PT Sans Narrow';

        table {
            border-collapse:collapse;
            border:1px solid rgba($grey, 0.5);

            tr {
                th, td {
                    padding:4px 8px;
                }

                th {
                    background:$blue;
                    color:white;
                }

                &:nth-child(2n-1) td {
                    background:rgba($grey, 0.1);
                }
            }
        }

        #throbber {
            width:100px;
            height: 22px;
            overflow: hidden;
            position:fixed;
            left:50%;
            top:-40px;
            background:$orange image-url('throbber.orange.gif') no-repeat 7px center;
            color:white;
            padding:4px 6px 4px 32px;
            margin-left:-68px;
            text-align:left;
            @include box-shadow(0, 2px, 4px, $grey);
        }

        header {
            background-color:$blue;
            float:left;
            width:20%;
            min-width:200px;
            height:100%;
            @include box-shadow(-5px, 0, 10px, $grey);

            #logo {
                width:100%;
                display:block;
                padding:10px 0;
                text-align:center;
            }

            menu {
                position:static;
                width:100%;

                li {
                    float:none;
                    a:hover {
                        border:none
                    }

                    &.selected {
                        a {
                            background-color:$blue-light;
                            border:none
                        }
                    }

                    &:last-child {
                        float:none;
                        position:fixed;
                        left:0;
                        bottom:0;
                        width:20%;
                        min-width: 200px;
                        text-align:center;

                        a {
                            background:$grey;
                            line-height: 48px;

                            &:hover {
                                background:$red
                            }
                            &:before { content: "< "}
                            &:after  { content: " >"}
                        }
                    }
                }
            }
        }

        #main {
            width:80%;
            min-width:690px;
            height:100%;
            overflow:auto;

            >* {
                margin-right:20px;
                margin-left:20px
            }

            .flash-message {
                z-index:9999;
                margin:0
            }
            
            form {
                padding:20px 20px 20px 0;
                position:relative;

                input {
                    width:97%;

                    &[type=button] {
                        width:auto;
                        cursor: pointer;
                        background:$grey;
                        color:white;
                    }

                    &[type=submit] {
                        float:right;
                        width:auto;

                        &.top {
                            position:absolute;
                            right:10px;
                            top:-10px;
                            margin:0
                        }
                    }

                    &.medium {
                        width:100px
                    }

                    &[type=file] {
                        cursor:pointer;
                    }
                }

                fieldset {
                    border:1px solid rgba($grey, 0.3);
                    padding:10px;
                    margin:10px 0;
                    @include border-radius(4px);

                    legend {
                        padding:0 5px;
                        color:rgba($grey, 0.6);
                        margin-left:10px
                    }

                    .left {
                        margin-right:10px
                    }
                }

                .image-picker {
                    width:410px;
                    height:200px;
                    overflow:hidden;

                    .remove {
                        text-align:right;
                        display:inline-block;
                        width: 100px;
                    }

                    .image {
                        width:300px;
                        height:200px;
                        overflow:hidden;
                        position:relative;
                        float:left;

                        img {
                            width:300px;
                        }

                        input[type=file] {
                            position:absolute;
                            z-index:2;
                            left:0;
                            top:0;
                            width: 300px;
                            height: 200px;
                            line-height: 200px;
                            opacity:0
                        }

                        .image-label {
                            position:absolute;
                            z-index: 1;
                            left:0;
                            top:0;
                            padding:2px 4px;
                            background:rgba(black, 0.3);
                            color:white;

                            &.empty {
                                display:none
                            }
                        }
                        .image-remove {
                            position:absolute;
                            z-index: 3;
                            right:0;
                            top:0;
                            width:16px;
                            height:16px;
                            font:bold 11px/16px Arial;
                            text-align: center;
                            background:rgba(black, 0.5);
                            color:white;
                            cursor:pointer;
                            border:2px solid transparent;

                            &:hover {
                                background:$red;
                                border-color:rgba(white, 0.7)
                            }
                        }
                    }
                }

                .map-input {
                    label {
                        float:left;
                        clear:both;
                        width:60px;
                        text-align:right;
                        margin:7px 0;
                    }
                    input[type=text] {
                        width:auto;
                        float:left;
                        margin:5px;
                    }
                }
            }
        }

        // TinyMCE
        .mce-combobox {
            button {
                text-align:left;

                .mce-i-browse {
                    margin-top:-4px
                }
            }
        }
    }

    &.login {
        display: table;
        width:100%;
        height: 100%;

        body {
            display:table-row;

            #main {
                display:table-cell;
                text-align: center;
                vertical-align: middle;
                background:rgba(black, 0.35);
                float:none;

                a {
                    color:rgba(white, 0.5)
                }

                h1 {
                    color:rgba(white, 0.8);
                }

                form {
                    width:240px;
                    margin:0 auto;
                    background:$blue;
                    color:white;
                    padding:10px;
                    @include box-shadow(0, 0, 10px, black);

                    label {
                        display:block;
                        margin-top:10px;
                    }

                    input {
                        display:block;
                        margin:5px auto;
                        width:80%;

                        &[type=submit] {
                            margin-top:20px;
                            float:none;
                            background:rgba($blue-light, 0.5);

                            &:hover {
                                background:$blue-light;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media all and (max-width: 900px) {
    html {
        body {
            header {
                float:none;
                width:100%;
                height:0.75*$header-height;
                text-align: left;

                #logo {
                    height: 0.75*$header-height;
                    padding:0;
                    display:inline-block;
                    width:auto;

                    img {
                        padding:10px;
                        height: 60%;
                    }
                }

                menu {
                    li:last-child {
                        position:static;
                        width: auto;

                        a {
                            line-height: $header-height
                        }
                    }
                }
            }

            #main {
                float:none;
                width:100%;
                min-width: 0;
                height:auto;
                margin:0;

                >* {
                    margin-left:2%;
                    margin-right:2%;
                }

                form {
                    fieldset {
                        width:100% !important
                    }
                }
            }
        }

        &.scroll {
            body {
                header {
                    menu {
                        li.toggler {
                            background-color:$blue;
                        }
                    }
                }
            }
        }

        &.login {
            body {

                #main {
                    background:$blue;

                    form {
                        @include box-shadow-none;
                    }
                }
            }
        }
    }
}